import React,{ useState} from "react";
import "./App.css"

import useMousePoint from "@/hooks/mousePoint";
import useShowDog from "@/hooks/showDog";
import useRandom from "@/hooks/useRandom";


export default function App(){
  const { mousePoint, setMousePoint, boxClick } = useMousePoint();
    const { dogUrl, setDogUrl, showDog } = useShowDog()
  const random = useRandom(1, 10)
  return (
       <div>
      <h1>{random}</h1>
      <h2>当前鼠标点击的位置相对box的坐标是:x:{mousePoint.x} ----- y:{mousePoint.y}</h2>
      <div className='box' onClick={boxClick}></div>
      <hr />
      <button onClick={showDog}>随机展示一条狗</button>
      <br />
      <img src={dogUrl} alt="" />
    </div>
  )
}
